<script setup>
import {computed, ref} from 'vue'

const price = ref(0)
const inputCount = ref(0)
const amount = ref(0)
const calcAmount = ()=>{
    console.log('method开始执行...')
    amount.value = price.value * inputCount.value
}
const calcAmountComputed = computed(()=>{
    console.log('computed开始执行')
    return  price.value * inputCount.value
})
</script>

<template>
    <div>
        <input type="text" placeholder="请输入价格" v-model.number="price">
        <input type="text" placeholder="请输入数量" v-model.number="inputCount">
        <button @click="calcAmount">计算</button>
        <span>合计总价:{{ amount }}</span>
        <div>
            实时计算总价:{{ calcAmountComputed }}
        </div>
    </div>
</template>